<template>
  <div class="posted" :style="{minHeight:$store.state.minHeight+'rem'}">
    <myHead title="已投递"></myHead>
    <EmptyState msg="您还没有投递过职位喔~" v-show="list.length<1"></EmptyState>
    <div class="zxzp-item" v-show="list.length>=1">
      <van-swipe-cell :before-close="beforeClose" v-for="(x,y) in list" :key="y" class="lqitem" :name="y"  :stop-propagation="true">
        <div class="zxzp-box">
          <div class="zxzp-box-name" @click="jump('JobDetails')"><p><span>{{x.name}}</span><img src="../../../static/img/huohuo111.png" alt=""></p><p>
            {{x.money}}</p></div>
          <div class="zxzp-box-jl"><p><span>{{x.jl}}&nbsp;&nbsp;月结</span></p><p>{{x.time}}</p></div>
          <div class="zxzp-box-bq">
            <div><p v-for="z in x.type">{{z}}</p></div>
            <p>{{x.td?'已投递':'投递'}}</p></div>
          <div class="zxzp-box-bot">
            <img src="../../../static/img/qiankukukuk.png" alt="">
            <div><p>{{x.gsName}}</p><p>{{x.msg}}</p></div>
          </div>
        </div>
        <template #right>
          <van-button square text="删除" type="danger" class="delete-button"/>
        </template>
      </van-swipe-cell>
    </div>
    <!--  询问弹窗  -->
    <van-dialog v-model="removeShow" title="确定删除吗？" show-cancel-button width="3.2rem" @confirm="confirm"></van-dialog>
  </div>
</template>

<script>
  import myHead from "../../components/ClientComponents/lib/myHead";
  import EmptyState from "../../components/ClientComponents/lib/EmptyState";
  export default {
    name: "posted",
    components: {
      myHead,
      EmptyState
    },
    data(){
      return {
        list:[{name:'厂家直招校园代理',money:"700元/月",jl:'黄埔/12.5 km',time:'11分钟前',type:['工资担保','包餐','包吃住'],td:true,gsName:'千库科技有限公司',msg:'电子商务 移动互联网 500-1000人'},
          {name:'厂家直招校园代理',money:"700元/月",jl:'黄埔/12.5 km',time:'11分钟前',type:['工资担保','包餐','包吃住'],td:true,gsName:'千库科技有限公司',msg:'电子商务 移动互联网 500-1000人'},
          {name:'厂家直招校园代理',money:"700元/月",jl:'黄埔/12.5 km',time:'11分钟前',type:['工资担保','包餐','包吃住'],td:true,gsName:'千库科技有限公司',msg:'电子商务 移动互联网 500-1000人'}],
        removeShow:false,
        state:'no'
      }
    },
    created() {
      this.$myAxios('index/Deliver/deliver_index', 'post',{
        user_id:this.$myStorage.query()
      }).then(res=>{
        console.log(res);
        if(res.data.state == 1){

        }else{

        }
      });
    },
    methods:{
      confirm(index,state){
        if (state != 'no') {
          this.list.splice(this.state,1);
        }
      },
      beforeClose({ position, instance }) {
        switch (position) {
          case 'left':
          case 'cell':
          case 'outside':
            instance.close();
            break;
          case 'right':
            this.removeShow = true;
            this.state = instance.name;
            break;
        }
      },
      jump(page){
        this.$router.push({
          name:page
        })
      }
    }
  }
</script>

<style scoped>
  .posted {
    width: 100%;
    box-sizing: border-box;
    padding: .6rem .1rem 0 .1rem;
    background-color: #F5F5F5;
  }

  .zxzp-item {
    background-color: #F5F5F5;
  }

  .zxzp-box {
    width: 100%;
    box-sizing: border-box;
    padding: .15rem .15rem;
    padding-bottom: 0;
    margin-bottom: .1rem;
    background-color: #ffffff;
  }

  .zxzp-box-name {
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
  }

  .zxzp-box-name, .zxzp-box-jl, .zxzp-box-bq {
    margin-bottom: .15rem;
  }

  .zxzp-box-name > p > img {
    width: .12rem;
    height: .14rem;
    margin-left: .15rem;
  }

  .zxzp-box-name > p:nth-child(1) {
    font-size: .15rem;
    font-family: PingFang SC;
    font-weight: bold;
    color: #1C1C1D;
  }

  .zxzp-box-name > p:nth-child(2) {
    font-size: .15rem;
    font-family: PingFang SC;
    font-weight: bold;
    color: #FA6C29;
  }

  .zxzp-box-jl {
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
  }

  .zxzp-box-jl > p {
    font-size: .12rem;
    font-family: PingFang SC;
    font-weight: 500;
    color: #A4A4A7;
  }

  .zxzp-box-bq {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: space-between;
  }

  .zxzp-box-bq > div {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
  }

  .zxzp-box-bq > div > p {
    padding: .05rem;
    background: rgba(252, 245, 238, 1);
    border-radius: .03rem;
    text-align: center;
    font-size: .12rem;
    font-family: PingFang SC;
    font-weight: 500;
    margin-right: .05rem;
  }

  .zxzp-box-bq > p:nth-child(2) {
    width: .6rem;
    height: .24rem;
    border: .01rem solid rgba(255, 126, 46, 1);
    border-radius: .12rem;
    text-align: center;
    line-height: .24rem;
    color: #FF6505;
    font-size: .13rem;
    font-family: PingFang SC;
    font-weight: 400;
  }

  .zxzp-box-bot {
    width: 100%;
    height: .6rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    border-top: .01rem solid #EEEEEE;
  }
  .zxzp-box-bot>img {
    width: .3rem;
    height: .3rem;
    border-radius: 100%;
    margin-right: .1rem;
  }
  .zxzp-box-bot>div {
    width: calc(100% - .5rem);
    height: .3rem;
    display: flex;
    flex-flow: column;
    justify-content: space-around;
  }
  .zxzp-box-bot>div>p:nth-child(1) {
    font-size:.12rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #333333;
    line-height: .12rem;
  }
  .zxzp-box-bot>div>p:nth-child(2) {
    font-size:.09rem;
    line-height: .09rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #999999;
  }


  /* 删除按钮 */
  >>> .van-swipe-cell__right>.van-button--normal {
    padding: 0 .15rem;
    font-size: .14rem;
  }
  >>> .van-swipe-cell__right>.van-button--danger {
    border: .01rem solid #ee0a24;
  }
  >>> .van-swipe-cell__right>.van-button {
    line-height: .42rem;
  }

  /* 弹窗 */
  /deep/ .van-dialog {
    font-size: .16rem !important;
    border-radius: .16rem !important;
    width: 3.2rem !important;

  }
  >>> .van-button--large {
    line-height: .48rem;
    height: .5rem;
  }
  >>> .van-button {
    font-size: .16rem;
    border-radius: .02rem;
  }
  >>> .van-dialog__header {
    line-height: .24rem;
  }
  >>> .van-dialog__header--isolated {
    padding: .24rem 0;
  }
  >>> .delete-button {
    height: 100%;
  }

  >>> .van-rate__icon {
    font-size: .13rem;
  }
</style>
